<template>
    <!-- ec-canvas/wallet/boxdetails/index.wxml -->
    <view>
        <view class="detailbox">
            <view class="flexbox-sb centers box1">
                <!-- <view class="centers" bindtap="showTime">
        <picker class="box1text1 mr-10" mode="date" fields="day" value="{{currentDate}}" start="{{minDate}}" end="{{maxDate}}" bindchange="onInputTime">
          <view class="picker">{{nowtime}}</view>
        </picker>
        <view class="jiao"></view>
      </view> -->
                <view class="date_box">
                    <!-- <view wx:for="{{date}}" data-indexs="{{index}}" bindtap="onTabs" class="date_item {{index == dateIndex ?  'date_item_active' : ''}}" wx:key="index" data-endTime="{{item.endTime}}" data-startTime="{{item.startTime}}">{{item.day}}</view> -->
                    <view class="range-style">
                        <!-- 时间段 -->
                        <view class="picker_group">
                            <picker mode="date" :value="startTime" :end="endTime" @change="bindDateChange">
                                <view class="picker">
                                    <text>{{ startTime }}</text>
                                </view>
                            </picker>
                            <image class="timeIcon" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_date.png"></image>
                        </view>
                        <text class="to">~</text>
                        <view class="picker_group">
                            <picker mode="date" :value="endTime" :start="startTime" end="2050-01-01" @change="bindDateChange2">
                                <view class="picker">
                                    <text>{{ endTime }}</text>
                                </view>
                            </picker>
                            <image class="timeIcon" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_date.png"></image>
                        </view>
                    </view>
                </view>
                <view class="centers" @tap="showType">
                    <picker @change="onChangeType" :value="index" :range="showtypeList">
                        <view class="picker mr-10">{{ showtypeList[index] }}</view>
                    </picker>
                    <view class="jiao"></view>
                </view>
            </view>
            <view class="flexbox-sb mt-40">
                <view class="flexbox-center">
                    <view class="wallettext2">收入金额</view>
                    <view class="wallettext3">{{ totalRevenue }}</view>
                </view>
                <view class="flexbox-center">
                    <view class="wallettext2">交易笔数</view>
                    <view class="wallettext3">{{ totalTransactions }}</view>
                </view>
            </view>
        </view>
        <block v-if="detailList.length > 0 && detailList != null" v-for="(item, index) in detailList" :key="index">
            <view class="price-item" :data-selectedFlag="item.selectedFlag" :data-index="index" @tap="changeToggle">
                <view class="price-num">{{ item.day }}</view>
                <view class="price-tips">交易金额{{ item.totalPayMoney }}元 共{{ item.totalNum }}笔</view>
                <view :class="'price-icon ' + (item.selectedFlag ? 'price-active' : '')"></view>
            </view>

            <view class="flexbox-sb box2" v-if="item.codeLogDTOS.length > 0" v-for="(v, index1) in item.codeLogDTOS" :key="v.id">
                <view>
                    <view class="box2text1">{{ v.remarks }}</view>
                    <view>
                        <text class="box2text2">{{ v.time }} {{ v.refundStatusDesc }}</text>
                    </view>
                </view>

                <view class="box2text3">
                    <text class="c-1">+{{ v.payMoney }}</text>
                    <view class="c-3" :data-id="v.id" v-if="(v.refundStatus < 1 || v.refundStatus == 3) && v.isShow" @tap.stop.prevent="onRefund">立即退款</view>
                </view>
            </view>

            <view v-if="item.codeLogDTOS.length == 0" class="no-price">（当日无交易）</view>
        </block>
        <view class="mt-20">
            <view class="w-100" v-if="detailList.length == 0 || detailList == null">
                <van-empty description="暂无数据" />
            </view>
            <!-- <view class="flexbox-sb box2" wx:for="{{detailList}}" wx:key="index" wx:if="{{detailList.length > 0}}">
      <view>
        <view class="box2text1">{{item.remarks}}</view>
        <view>
          <text class="box2text2">{{item.time}} {{item.refundStatusDesc}}</text>
        </view>
      </view>
      <view class="box2text3">
        <text class="c-1">+{{item.payMoney}}</text>
        <view class="c-3" data-id="{{item.id}}" wx:if="{{(item.refundStatus < 1 || item.refundStatus == 3) && item.isShow}}" catchtap="onRefund">立即退款</view>
      </view>
    </view> -->
        </view>
    </view>
</template>

<script>
// ec-canvas/wallet/boxdetails/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
import { getTime } from '../../../utils/util.js'; // 引入utils;

const moment = require('../../../utils/moment.min');

export default {
    data() {
        return {
            hairimgUrl: app.globalData.hairimgUrl,

            //全局美发师img路径
            currentDate: moment().format('YYYY-MM-DD'),

            minDate: moment().subtract(3, 'year').format('YYYY-MM-DD'),
            maxDate: moment().format('YYYY-MM-DD'),

            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }

                if (type === 'month') {
                    return `${value}月`;
                }

                return value;
            },

            showtypeList: ['全部类型', '微信', '支付宝'],
            index: 0,
            nowtime: '',
            nowtime1: '',
            typetit: '全部类型',
            typetit1: '全部类型',

            date: [
                {
                    day: '全部',
                    endTime: '',
                    startTime: ''
                },
                {
                    day: '今日',
                    startTime: moment().format('YYYY-MM-DD') + ' 00:00:00',
                    endTime: moment().format('YYYY-MM-DD') + ' 23:59:59'
                },
                {
                    day: '昨日',
                    startTime: moment().subtract('days', 1).format('YYYY-MM-DD') + ' 00:00:00',
                    endTime: moment().subtract('days', 1).format('YYYY-MM-DD') + ' 23:59:59'
                },
                {
                    day: '近七日',
                    startTime: moment().subtract('days', 6).format('YYYY-MM-DD') + ' 00:00:00',
                    endTime: moment().format('YYYY-MM-DD') + ' 23:59:59'
                }
            ],

            dateIndex: 1,

            // 默认选中0
            type: '2,3',

            showtype: false,
            showtime: false,
            detailList: [],
            page: 1,
            gettime: '',
            detailList: [],

            // 列表数据
            endTime: '',

            startTime: '',
            totalRevenue: '0.00',
            totalTransactions: '0',
            selectedFlag: [false, false],

            v: {
                id: '',
                remarks: '',
                time: '',
                refundStatusDesc: '',
                payMoney: '',
                refundStatus: 0,
                isShow: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData(
            {
                gettime: getTime(new Date().getTime()),
                endTime: moment().format('YYYY-MM-DD'),
                startTime: moment().format('YYYY-MM-DD') // endTime: moment().format('YYYY-MM-DD') + ' 23:59',
                // startTime: moment().format('YYYY-MM-DD') + ' 00:00',
            },
            () => {
                this.getfindOrderDetail();
                this.getBoxCollectionCodeLogStatistics();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let time = getTime(new Date().getTime(), 6);
        this.setData({
            nowtime: time
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.hideNavigationBarLoading(); //完成停止加载
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // this.setData({
        //   page: this.data.page + 1
        // }, () => {
        //   this.getfindOrderDetail()
        //   this.getBoxCollectionCodeLogStatistics()
        // })
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 点击退款
        onRefund(e) {
            const { id } = e.currentTarget.dataset;
            const vm = this;
            uni.showModal({
                cancelText: '取消',
                confirmText: '确定',
                content: '确定退款?',
                success: (result) => {
                    if (result.confirm) {
                        // 退款状态：1：退款中 2：退款成功 3：退款失败
                        _request
                            .postObj(
                                '/collectionCodeLog/refund',
                                {
                                    id
                                },
                                app.globalData.userType
                            )
                            .then((res) => {
                                if (res.data.data == '2') {
                                    uni.showModal({
                                        content: '退款成功，用户资金将原路退回。',
                                        showCancel: false,
                                        confirmText: '知道了',
                                        success: (result) => {
                                            vm.getfindOrderDetail();
                                            vm.getBoxCollectionCodeLogStatistics();
                                        }
                                    });
                                } else if (res.data.data == '3') {
                                    uni.showModal({
                                        content: '可结算余额不足，不支持退款',
                                        showCancel: false,
                                        confirmText: '知道了'
                                    });
                                } else if (res.data.data == '1') {
                                    uni.showModal({
                                        content: '退款中',
                                        showCancel: false,
                                        confirmText: '知道了'
                                    });
                                }
                            });
                    } else if (result.cancel) {
                    }
                }
            });
        },

        changeToggle(e) {
            var that = this;
            var index = e.currentTarget.dataset.index;
            var selectedflag = e.currentTarget.dataset.selectedflag;
            console.log(index, selectedflag);
            var arrCut = 'detailList[' + index + '].selectedFlag';
            that.detailList[index].selectedFlag = !selectedflag;
        },

        // 切换日期
        onTabs(e) {
            const { indexs, endtime, starttime } = e.currentTarget.dataset;
            this.setData(
                {
                    dateIndex: indexs,
                    endTime: endtime,
                    page: 1,
                    startTime: starttime
                },
                () => {
                    this.getfindOrderDetail();
                    this.getBoxCollectionCodeLogStatistics();
                }
            );
        },

        // 显示时间弹窗
        showTime() {
            this.setData({
                showtime: true
            });
        },

        // 关闭窗口
        onCloseTime() {
            this.setData({
                showtime: false
            });
        },

        // 获取时间
        // onInputTime(event) {
        //   let dt = event.detail.value
        //   this.setData({
        //     detailList: [],
        //     currentDate: dt,
        //     nowtime: moment(dt).format('YYYY年MM月DD日'),
        //     gettime: moment(dt).format('YYYY-MM-DD'),
        //     page: 1,
        //   }, () => {
        //     this.getfindOrderDetail()
        //   })
        // },
        // 显示类型弹窗
        showType() {
            this.setData({
                showtype: true
            });
        },

        bindDateChange(e) {
            let that = this;
            that.setData({
                page: 1,
                startTime: e.detail.value
            });
            that.getfindOrderDetail();
            that.getBoxCollectionCodeLogStatistics();
        },

        bindDateChange2(e) {
            let that = this;
            console.log(e.detail.value);
            that.setData({
                page: 1,
                endTime: e.detail.value
            });
            that.getfindOrderDetail();
            that.getBoxCollectionCodeLogStatistics();
        },

        // 关闭窗口
        onCloseType() {
            this.setData({
                showtype: false
            });
        },

        // 获取选择类型
        onChangeType(event) {
            const index = event.detail.value;
            this.setData({
                index: index,
                page: 1
            });

            if (index == 0) {
                this.setData(
                    {
                        type: '2,3'
                    },
                    () => {
                        this.getfindOrderDetail();
                        this.getBoxCollectionCodeLogStatistics();
                    }
                );
            } else {
                this.setData(
                    {
                        type: Number(index) + 1
                    },
                    () => {
                        this.getfindOrderDetail();
                        this.getBoxCollectionCodeLogStatistics();
                    }
                );
            }
        },

        // 统计接口
        getBoxCollectionCodeLogStatistics() {
            const { page, gettime, type, startTime, endTime } = this;

            _request
                .postObj(
                    '/collectionCodeLog/getBoxCollectionCodeLogStatistics',
                    {
                        createTime: '',
                        storeId: uni.getStorageSync('storeId'),
                        pageNo: page,
                        pageSize: 10,
                        payType: type,
                        startTime: startTime + ' 00:00',
                        endTime: endTime + ' 23:59'
                    },
                    app.globalData.userType
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({ ...res.data.data });
                    }
                });
        },

        // 列表数据
        getfindOrderDetail() {
            const { page, gettime, type, startTime, endTime, detailList } = this;

            _request
                .postObj(
                    '/collectionCodeLog/getBoxCollectionCodeLog',
                    {
                        createTime: '',
                        storeId: uni.getStorageSync('storeId'),
                        pageNo: page,
                        pageSize: 10,
                        payType: type,
                        startTime: startTime + ' 00:00',
                        endTime: endTime + ' 23:59'
                    },
                    app.globalData.userType
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        const time = 86400000 * 7;
                        const nowtime = Date.parse(new Date()); // console.log(Date.parse(new Date()) - time);
                        // const data = page > 1 ? [ ...detailList,...res.data.data.rows] : res.data.data.rows
                        // this.setData({
                        //   detailList: data.map(e => {
                        //     e.isShow = (e.createTime + time) > nowtime ? true : false
                        //     e.time = moment(e.createTime).format('YYYY-MM-DD HH:mm:ss')
                        //     return e
                        //   })
                        // })

                        const data = res.data.data;

                        if (data) {
                            data.map((v) => {
                                v.selectedFlag = true;
                                v.codeLogDTOS.map((k) => {
                                    if (v.createTime + time > nowtime) {
                                        v.isShow = true;
                                    } else {
                                        v.isShow = false;
                                    }

                                    k.time = moment(k.createTime).format('YYYY-MM-DD HH:mm:ss');
                                });
                            });
                        }

                        this.setData({
                            detailList: data
                        });
                    }
                });
        }
    }
};
</script>
<style>
/* ec-canvas/wallet/boxdetails/index.wxss */
.jiao {
    width: 0px;
    height: 0px;
    border-top: 12rpx solid #333333;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
}

/* 明细 */
.detailbox {
    width: 710rpx;
    margin: 20rpx;
    padding: 0 20rpx 60rpx 20rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
}

.box1 {
    width: 100%;
    height: 124rpx;
    border-bottom: 1px solid #ededed;
}

.box1text1 {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.box2 {
    height: 144rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
    padding: 0 60rpx;
}

.box2text1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.box2text3 {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
}

.c-1 {
    color: #ff1717;
}

.c-2 {
    color: #53d393;
}

/* 弹窗 */
.pbox1 {
    height: 360rpx;
}

.pbox2 {
    height: 360rpx;
}

.btn1 {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: -30rpx;
    text-align: center;
}

.btn2 {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: 50rpx;
    text-align: center;
}

.van-tab--active {
    font-size: 32rpx !important;
}

.pbox2 .van-picker {
    height: 360rpx !important;
}

.date_box {
    /* width: 480rpx; */

    display: flex;
    justify-content: space-between;
}

.date_item {
    padding: 0 25rpx;
    line-height: 68rpx;
    height: 68rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    border-radius: 34rpx;
    text-align: center;
}

.date_item_active {
    color: #fff;
    background: #ff8722;
    font-size: 24rpx;
}

.flexbox-center {
    width: 310rpx;
    height: 140rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fbfbfb;
    border-radius: 10px;
}

.wallettext3 {
    height: 50rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 50rpx;
    padding-top: 30rpx;
    width: 100%;
    text-align: center;
}

.wallettext2 {
    height: 20rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20rpx;
    padding-top: 10rpx;
}

.picker {
    font-size: 24rpx;
}

.c-3 {
    color: #ff8722;
    font-size: 24rpx;
}

.range-style {
    display: flex;
    align-items: center;
    /* padding-left: 10rpx; */
    /* background-color: #fff; */
}

.picker_group {
    color: #ee8e42;
    background: #ffefe1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    padding: 5rpx 15rpx;
    border-radius: 34rpx;
}

.picker_group picker {
    font-size: 34rpx;
    height: 45rpx;
    /* padding-left:20rpx;
  padding-right:20rpx; */
    line-height: 45rpx;
}
.to {
    color: #ee8e42;
    margin: 0 5rpx;
}
.timeIcon {
    width: 28rpx;
    height: 28rpx;
    margin-left: 15rpx;
}

.price-item {
    height: 120rpx;
    border-bottom: 1rpx solid #ebf3f7;
    background: #fff;
    display: flex;
    flex-direction: column;
    margin-left: 40rpx;
    justify-content: center;
    position: relative;
}
.price-num {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    color: #000000;
}
.price-tips {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    color: #666666;
}
.price-icon {
    position: relative;
    position: absolute;
    right: 40rpx;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 40rpx;
    height: 40rpx;
    background: #fdf3ec;
    border-radius: 50%;
}
.price-icon::after {
    content: '';
    position: absolute;
    top: 14rpx;
    right: 13rpx;
    width: 14rpx;
    height: 14rpx;
    border-right: 1px solid #ee8e42;
    border-bottom: 1px solid #ee8e42;
    transform: rotate(45deg);
    transform: all 0.8s;
}

.price-active::after {
    transform: rotate(225deg);
}
.no-price {
    text-align: center;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    color: #666666;
    background-color: #fff;
    padding-top: 30rpx;
}
</style>
